<div id="mail-mailList" data-view="mail/mailList">
<style type="text/css">
.scroller li{
	height: 74px !important;
	background-color: #FFFFFF!important;
	border-bottom: 1px #EEEEEE solid;
	border-top: 1px white solid;
}
.container {
  background: #fff;
  position: static;
  width: 100%; 
  height: 100%;
}
/**/
.email-model{
	height: 100%;

	padding: 16px 10px 18px 10px;
}
.mailInfoFrist div{
	display: inline-block;
}
.mailImg,.mailInfo,.mailImgCopy{
	display: inline-block;
}
.mailImg{
	width: 20%;
	height: 100%;
	line-height: 80px;
	text-align: center;
}
.mailImg img{
	vertical-align: middle;
}
.mailInfo{
	width: 100%;
	vertical-align: middle;
	transition:width 0.5s;
-moz-transition:width 0.5s; /* Firefox 4 */
-webkit-transition:width 0.5s; /* Safari and Chrome */
-o-transition:width 0.5s; /* Opera */
}
.mailImgCopy{
	width: 10%;
}
.imgCont{
	margin: auto;	
	width: 50px;
	border-radius: 50%;
}
.mailTag{
	/*background-image: url('../mail/img/attachment.png');*/
	background-size: contain;
	width: 15px;
	height: 15px;
	margin-left: 5px;
}
.mailTime{
	float: right;
	color: #BFC7D4;
}
.mailInfoSecoud{
	overflow: hidden;
	height: 25px;
	color: #636a78;
	font-size: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
	/*width: 100%;*/
	padding-top: 8px;
}
.mailName{
	color: #2F2F2F;
}
.outBoxMailName{
	color: #2F2F2F;
	overflow: hidden;
max-width: 65%;white-space: nowrap;text-overflow: ellipsis;
}

/*
foot
*/
.hbox{
	/*background-color: #EEEEEF !important;*/
	-webkit-box-shadow: 0 0 1px #D5D5D5;
	height: 46px;
}
.emailEdit{
	width: 50px;
	height: 100%;
	font-size: 12px !important;
	display: hidden;
}

.listState{
	height: 13px;
	position: relative;
	top: 1px;
}

.outBoxListState{
	height: 13px;
	position: relative;
	top: -1px;
}
.footImg{
	height: 23px;
	margin-top: 13px;
	vertical-align: bottom;
}
/*
.checkDiv{
	display: none;
}
.checkDiv img{
	vertical-align: middle;
	width: 22px;
}*/

.editMail{
	display: none;
	line-height: 44px;
}
.sendMailStyle{
	padding-left: 8px;
	display: inline-block;
	padding-bottom: 2px; 
}
.flex1 span{
color: #747B87;
}
/*edit*/
.scroller li .selection span {
background-image: url('../mail/img/uncheck.png');
background-size: 100%;
position: absolute;
width: 22px;
height: 22px;
-webkit-border-radius: 50px;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
border: none;
}
.scroller li .selected span {
background-image: url('../mail/img/check.png') !important;
background-size: 100% !important;
position: absolute;
width: 22px;
height: 22px;
-webkit-border-radius: 50px;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
border: none;
background-color: transparent !important; 
}
.scroller li .selection{
	width: 40px;
	margin-left: -40px;
}
</style>
<script id="mail-template" type="text/x-underscore-template">
  <div class="email-model"   data-id=<%=id%> data-state=<%=state%>>

		
				<div class="mailInfoFrist">
				<%
					var stateImg;
				if(state==="HAS_READED"||state==="EDITING"||state==="HAS_SENT"){
					stateImg = "../mail/img/gray.png";
				}else if(state==="NOT_READED"){
					stateImg = "../mail/img/red.png";
				}%>
					<%
						var outbox = window.location.hash.slice(-6);<!--发件箱，没有附件 -->
					if(outbox&&outbox==="outbox"){%> 
						<img src=<%=stateImg%> alt="" class="outBoxListState">
						<div class="outBoxMailName">
					<%}else{%>
						<img src=<%=stateImg%> alt="" class="listState">
						<div class="mailName">
					<%}%>

					<%
						var num = fromusername.indexOf("(");
						var mailName = null;
						var outbox = window.location.hash.slice(-6);
						if(outbox&&outbox==="outbox"){ 				<!--发件箱，发送人显示到列表 -->
							var username = receivers.split(",")[0];
							var has = receivers.indexOf("(");
							if(username.length>0 && has>-1){
								mailName = receivers.substring(0,has);
							}else{
								mailName = username;
							}
						}
						else if(num>-1){ <!--如果有括号截取掉 -->
							mailName = fromusername.substring(0,num);
						}else{
							mailName = fromusername
						}
					%>
						<%=mailName%>
					</div>
					<%if(attachmentcount>0){ %>
						<div class="mailTag" style="background-image:url('../mail/img/attachment.png')"></div>
					<%}%>
					<div class="mailTime fontFamily"><%= date %></div>
				</div>
				<div class="mailInfoSecoud">
		       	 	<%= _.escape(subject) %>
				</div>

	<div class="mailImgCopy"></div>
  </div>

</script>
<!-- 邮件列表图片注释 -->
<!-- <div class="mailImg">
			<img src="../img/9696.jpg" class="imgCont">
	</div> -->
<header class="bar bar-nav">
    <a class="icon icon-left-nav pull-left" data-action="back"></a>
  <h1 class="title"></h1>
  <button class="btn btn-link btn-nav pull-right emailEdit">
    <span style="font-size: 14px;">编辑</span>
  </button>
</header>


<div id="toolbar-normal" class="bar bar-standard bar-footer pull-center hbox">
  <p class="flex1 sendMail"><img src="../mail/img/sendmail.png" alt="" class="footImg"><span class="sendMailStyle">写邮件</span></p>

   <p class="flex1 moveMail editMail"><span>移动至回收站</span></p>
    <p class="flex1 deleteMail editMail"><span>删除</span></p>
</div>


<div class="content">
	<div class="container">
		<div id="mail-list" class="listview high" >
	      <div class="scroller">
	          <div class="pulldown">
	            <span class="icon"></span><span class="label"></span>
	          </div>
	          <ul>
	          </ul>
	      <!--     <div class="pullup">
	            <span class="icon"></span><span class="label">上拉加载更多...</span>
	          </div> -->
	          	<button class="loadmore btn btn-block btn-outlined">
	            <div class="label">加载更多</div>
	            <span class="icon"></span>
	          	</button>
	          	  <div class="message">
			        <div class="empty">没有数据</div>
			        <div class="error">数据加载失败</div>
			      </div>
	           </div>
	    	</div>
		</div>
	</div>
</div>